<script>
import { searchMidKeywordService } from '../api/keyword.js'; // 导入接口

export default {
  data() {
    return {
      state: '',  // 输入框内容
      links: [],  // 显示的关键词列表
      loading: false,  // 用于控制加载状态
      defaultLinks: [ // 默认显示的关键词
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
      ],
    };
  },
  methods: {
    // 获取建议数据并更新 links
    querySearchAsync(queryString, cb) {
      if (queryString) {
        this.fetchKeywordData(queryString, cb); // 调用数据请求方法
      } else {
        cb(this.defaultLinks);  // 如果没有输入，返回默认数据
      }
    },

    // 调用接口获取中介词数据并更新 links
    fetchKeywordData(query, cb) {
      if (this.loading) return; // 防止重复请求
      this.loading = true;

      const searchData = { query: query };
      searchMidKeywordService(searchData).then(response => {
        if (response.code === 0) {
          // 假设 response.data 是一个数组，包含 { word, url } 对
          const suggestions = response.data.map(item => ({
            value: item.word, // 显示的关键词
            link: item.url,   // 对应的链接
          }));

          cb(suggestions); // 返回转换后的数据
        } else {
          console.error('Failed to fetch mid keywords:', response.message);
          cb([]); // 如果接口请求失败，返回空数组
        }
      }).catch(error => {
        console.error('Error fetching mid keywords:', error);
        cb([]); // 请求失败时返回空数组
      }).finally(() => {
        this.loading = false; // 请求结束后解除加载状态
      });
    },

    // 用于处理选择的函数
    handleSelect(item) {
      console.log('Selected item:', item);
    },

    // 每次输入时更新列表
    updateLinks(query) {
      // 每次键入都会调用接口更新列表
      if (query) {
        this.fetchKeywordData(query, () => { }); // 强制更新
      } else {
        this.links = [];  // 如果没有输入，清空显示的列表
      }
    },

    // 输入框获取焦点时加载默认数据
    handleFocus() {
      if (!this.state) {  // 如果输入框没有输入内容
        this.links = this.defaultLinks;  // 显示默认的数据
      }
    },
  },
};
</script>


<template>
  <div style="height: 400px;width: 100%;">
    <div class="video-background">
      <!-- 背景视频 -->
      <video autoplay muted loop class="background-video">
        <source src="../img/video1.mp4" type="video/mp4" />
        您的浏览器不支持视频播放。
      </video>

      <!-- 主内容 -->
      <div class="content">
        <div class="centered-text">
          <h1 style="font-size: 50px;color:white;">Find long tail keywords with low SEO difficulty</h1>
          <h2 style="font-size: 20px;color:white;">KWFinder is the only keyword tool in the universe you will ever need.
            Seriously</h2>
        </div>
        <div
          style="position: relative; display: flex; justify-content: center; align-items: center; height: 25vh; box-sizing: border-box;">
          <el-button type="primary" :icon="Search" class="custom-button"
            style="position: relative; right: 81px; top: 2px;" @click="searchKey(state)">
            Search
          </el-button>
          <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input"
            @select="handleSelect"
            style="width: 45%; height: 70px; padding: 0 20px; text-align: left; line-height: 70px; font-size: 18px;margin-left:-100px ;" />
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
/* 背景视频样式 */
.video-background {
  position: relative;
  width: 100vw;
  height: 100vh;
  top: -24px;
  overflow: hidden;
  z-index: -1;
}

.background-video {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频覆盖整个容器 */
  z-index: -1;
}

.video-background {
  position: relative;
  z-index: 0;
  /* 保证背景不会覆盖内容 */
}

/* 主内容区域样式 */
.content {
  position: relative;
  z-index: 1;
  /* 确保内容在视频上方 */
}

.centered-text {
  text-align: center;
  /* 水平居中 */
  margin-top: 100px;
}

/* 按钮样式 */
.custom-button {
  background-color: white;
  color: black;
  border: 1px solid black;
  transition: all 0.3s ease;
  font-weight: bolder;
  font-family: 'Microsoft JhengHei UI Light';
  width: 100px;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 5px;
  margin-left: 100px;
  height: 52px;
}

.custom-button:hover {
  background-color: #0521cc;
  color: white;
  font-size: larger;
  border: gold;
}


::v-deep(.el-input__inner) {
  height: 50px;
  line-height: 70px;
  padding: 0 0px;
  font-size: 24px;
  font-weight: bold;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  border-radius: 0px !important;
  /* 直角边设置 */
  background-color: transparent;
  /* 背景透明 */
  color: black;
  /* 确保文字颜色清晰可见 */
  transition: all 0.3s ease;
  /* 添加平滑过渡效果 */
}
</style>
